import * as THREE from 'three'
import {AmbientLight, Camera, OrthographicCamera, PerspectiveCamera, PointLight} from "three";

let renderer:THREE.WebGLRenderer;

const width = document.getElementById('canvas-frame').clientWidth
const height = document.getElementById('canvas-frame').clientHeight
function initThree() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    })
    renderer.setSize(width, height)
    document.getElementById('canvas-frame').appendChild(renderer.domElement)
    renderer.setClearColor(0xffffff, 1.0)
}

let camera:Camera
function initCamera() {
    camera = new PerspectiveCamera(45, width / height, 1, 10000)
    // camera = new OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 10, 1000)
    camera.position.set(0,0,600)
    camera.up.set(0,1,0)
    camera.lookAt(0,0,0)
}

let scene: THREE.Scene
function initScene() {
    scene = new THREE.Scene()
}

let light:AmbientLight;
function initLight() {
    light = new AmbientLight(0xff0000)
    light.position.set(100,100,200)
    scene.add(light)

    light = new PointLight(0x00ff00)
    light.position.set(0,0,300)
    scene.add(light)
}

let cube:THREE.Mesh;
function initObject() {
    const geometry = new THREE.CylinderGeometry(70, 100, 200);
    const material = new THREE.MeshLambertMaterial({color: 0xffffff})
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(0,0,0)
    cube = mesh
    scene.add(mesh)
}

function threeStart() {
    initThree()
    initCamera()
    initScene()
    initLight()
    initObject()
    animation();
}

threeStart();

function animation() {
    changeFov();
    cube.rotateY(0.01)
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
}

function setCameraFov(fov) {
    (camera as PerspectiveCamera).fov = fov;
    (camera as PerspectiveCamera).updateProjectionMatrix();
}

function changeFov() {
    let txtFov = (document.getElementById("txtFov") as HTMLInputElement).value;
    let val = parseFloat(txtFov)
    setCameraFov(val)
}